<template>
  <div class="page">
      <span class="topPage" @click = "topPage">上一页</span>
      <ul class="pageList">
        <li @click = "pageList" v-for = "(index) in pageNumber" :key="index" v-if = "index < pageNum + 5 && index > pageNum - 1">
            {{index}}
        </li>
      </ul>
      <span class="bottomPage" @click = "bottomPage">下一页</span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pageNum: 1,
      pageNumber: 26,
      pagen: 0
    }
  },
  methods: {
    topPage: function (event) {
      this.pageNum = this.pageNum + 1
    },
    pageList: function (event) {
      if (parseInt(event.target.innerHTML) === 1 || parseInt(event.target.innerHTML) === this.pageNumber) {
      } else if (parseInt(event.target.innerHTML) === 2) {
        this.pageNum = parseInt(event.target.innerHTML) - 1
      } else if (parseInt(event.target.innerHTML) === this.pageNumber - 1) {
        this.pageNum = parseInt(event.target.innerHTML) - 3
      } else {
        this.pageNum = parseInt(event.target.innerHTML) - 2
      }
    },
    bottomPage: function () {
      this.pageNum = this.pageNum - 1
    }
  }
}
</script>

<style>
@import url('../../static/components/page.css');
</style>

